<template>
  <svg @contextmenu.prevent.stop="cheakState"
       @click.stop="itemRightClick_2($event, 'didao',jg_name,name,brandInfo,data_id,stateDesc,isMainPage,info)"
  >
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer">

      <template v-if="state == 1">
        <line x1="25" y1="40" x2="25" y2="65" stroke="#FF0000" stroke-width="3"></line>
        <line x1="16" y1="65" x2="34" y2="65" stroke="#FF0000" stroke-width="3"></line>
        <line x1="20" y1="20" x2="30" y2="20" stroke="#FF0000" stroke-width="3"></line>
        <line x1="18" y1="24" x2="32" y2="24" stroke="#FF0000" stroke-width="3"></line>
        <line x1="16" y1="28" x2="34" y2="28" stroke="#FF0000" stroke-width="3"></line>
        <line x1="25" y1="28" x2="25" y2="40" stroke="#FF0000" stroke-width="3"></line>
        <line x1="16" y1="40" x2="34" y2="40" stroke="#FF0000" stroke-width="3"></line>
      </template>
      <template v-else>
        <line x1="25" y1="40" x2="15" y2="60" stroke="#93f958" stroke-width="3"></line>
        <line x1="16" y1="65" x2="34" y2="65" stroke="#93f958" stroke-width="3"></line>
        <line x1="20" y1="20" x2="30" y2="20" stroke="#93f958" stroke-width="3"></line>
        <line x1="18" y1="24" x2="32" y2="24" stroke="#93f958" stroke-width="3"></line>
        <line x1="16" y1="28" x2="34" y2="28" stroke="#93f958" stroke-width="3"></line>
        <line x1="25" y1="28" x2="25" y2="40" stroke="#93f958" stroke-width="3"></line>
        <line x1="16" y1="40" x2="34" y2="40" stroke="#93f958" stroke-width="3"></line>
      </template>
    </g>
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+textRotate+')'" class="cursor-pointer">
      <g v-if="rotate === 0" :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
        <rect width="30" height="50" fill="transparent" x="10" y="16"></rect>
        <text x="2" y="12" fill="#fff">{{name}}</text>
      </g>
      <g v-else-if="rotate === -90" >
        <g :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
          <rect width="50" height="30" fill="transparent" x="16" y="-40"></rect>
          <text x="-35" y="-20" fill="#fff">{{name}}</text>
        </g>

        <circle cx="-10" cy="-45" r="5" fill="#FF5B41" stroke="#FF5B41" stroke-width="3" v-if="hasCircle && state === 1"></circle>
        <circle cx="-10" cy="-45" r="5" fill="none" stroke="#87D66E" stroke-width="3" v-if="hasCircle && state === 0"></circle>
      </g>
      <g v-else-if="rotate === 90">
        <g :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
          <rect width="50" height="30" fill="transparent" x="-67" y="10"></rect>
          <text x="-10" y="30" fill="#fff">{{name}}</text>
        </g>

        <circle cx="15" cy="0" r="5" fill="#FF5B41" stroke="#FF5B41" stroke-width="3" v-if="hasCircle && state === 1"></circle>
        <circle cx="15" cy="0" r="5" fill="none" stroke="#87D66E" stroke-width="3" v-if="hasCircle && state === 0"></circle>
      </g>
        <g v-else-if="rotate === 180">
            <g  :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
            <rect width="50" height="30" fill="transparent" x="-67" y="10"></rect>
            <text x="-80" y="-40" fill="#fff">{{name}}</text>
            </g>
            <circle cx="15" cy="0" r="5" fill="#FF5B41" stroke="#FF5B41" stroke-width="3" v-if="hasCircle && state === 1"></circle>
            <circle cx="15" cy="0" r="5" fill="none" stroke="#87D66E" stroke-width="3" v-if="hasCircle && state === 0"></circle>
        </g>
    </g>
  </svg>
</template>
<script>
import {submitOperateRecord} from "@/api/api";

export default {
  props: {
    name: {
      required: true, // 控件名称
      type: String
    },
      textTranslateX:{
        type: Number,
        default: 0
      },
      textTranslateY:{
        type: Number,
        default: 0
      },
      textRotate:{
        type: Number,
        default: 0
      },
      isMainPage:{
        type: Boolean,
      },
      stateDesc:{
        type: String,
        default: ""
      },
      info:{
        type: Object,
          default: function () {
            return {}
          }
      },
      scale:{
        type: Number,
        default: 1
      },
      brandInfo:{
          type: String,
          default: ""
      },
      jg_name:{
        type:String,
          default:''
      },
      data_id:{
          type: String,
          default: ''
      },
    state: {    // 控件状态
      required: true,
      type: Number,
      default: 0
    },
    controlIndex: { // 控件索引
      type: Number,
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    },
    hasCircle: { // 是否有圆环
      type: Boolean,
      default: false
    }
  },
	data() {
		return {
			faultAbnormalObj: {
				faultData: [
					{id:1, label: '地刀动作1'},
					{id:2, label: '地刀动作2'},
				],
				abnormalData: [
					{id:1, label: '地刀着火', typeList:[{value: 0, label: '正常'}, {value: 1, label: '着火'}], currentType: {value:0, label: '正常'}},
					{id:2, label: '地刀漏油', typeList:[{value: 0, label: '正常'}, {value: 1, label: '漏油'}], currentType: {value:0, label: '正常'}},
				],
			}
		}
	},
  methods: {
   //  // 右键事件
   //  contextMenuHandler() {
   //    // this.$emit('contextmenu', this.controlIndex);
			// let params = {
			// 	name: this.name,
			// 	state: this.state,
			// 	controlIndex: this.controlIndex,
			// 	controlStatusList: [{value:0,label: '分开'},{value:1, label: '合上'}]
			// }
			// this.$emit('contextmenu', params);
   //  },

	 // 右击菜单
      cheakState(){
        if (this.$store.state.isMainPage) return
          this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='开关').desc;
          this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.state_desc).replace('state', (Number(this.state) === 0 ? "分" : "合"))
          submitOperateRecord( {log_desc:this.desc})
   },
      itemRightClick_2(event, type,jianGeMing, deviceName,brandInfo,data_id,stateDesc,isMainPage,info) {
          event.preventDefault(); // 阻止默认的右键菜单弹出
          // 显示自定义右键菜单
          const {clientX, clientY} = event
          let params = {
              clientX,
              clientY,
              type,
              info,
              stateDesc,
              jianGeMing,
              deviceName,
              data_id,
              brandInfo,
              isMainPage,
              faultAbnormalObj: this.faultAbnormalObj,
              currentObj: {
                  name: this.name,
                  state: this.state,
                  controlIndex: this.controlIndex,
                  controlStatusList: [{value:0,label: '分'},{value:1, label: '合'}]
              },
              guapaiObj: {
                  factory: '330KV元墩变',
                  factoryName: this.name,
              },
              yaokongObj: {
                  value: 0,
                  title: '330KV元墩变',
                  measurePoint: this.name ,
                  state: this.state,
              },
          }
          this.$emit('itemRightClick', params)
      },

    // 点击事件
    clickHandler() {
      this.$emit('changeStatus', {
        controlIndex: this.controlIndex,
        state: this.state === 1 ? 0 : 1
      });
    },
  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
svg {
  transform-origin: center center;
}
</style>
